<template>
	<view class="box">
		<!-- 购物车 -->
		<view class="cart-title">购物车</view>
		<van-empty v-if="cartList.length == 0" image="error" description="购物车暂无商品" />
		<view v-else class="">
			<!-- 商品列表 -->
			<view class="goods-list">
				<!-- 每个商品 -->
				<view class="goods-item" v-for="item in cartList" :key="item.id">
					<!-- 商品图片 -->
					<view class="goods-imgs">
						<image :src="item.goods_images[0]"></image>
					</view>
					<!-- 商品介绍 -->
					<view class="text">
						<!-- 商品名称 -->
						<view class="name">{{ item.goods_name }}</view>
						<!-- 商品款式 -->
						<view class="goods_style" @click="selectStyle(item.id)">
							<view>{{ item.goods_styles[item.styleIndex] }}</view>
						</view>
						<view class="goods-operate">
							<!-- 商品价格 -->
							<view class="price">￥{{ item.goods_price }}</view>
							<!-- 商品数量 -->
							<view class="num">
								<van-stepper @change="addNum(item)" v-model="item.num" theme="round" button-size="22"
									disable-input />
							</view>
							<!-- 删除商品 -->
							<van-icon @click="delmsg(item.goods_id)" name="delete-o" size="20" color="#ee0a24" />
						</view>
					</view>
				</view>
			</view>
			<!-- 点击款式 -->
			<van-popup v-model:show="show" position="bottom" :style="{ padding: '64px' }">
				<view class="product-window on">
					<!-- 商品信息 -->
					<view class="acea-row">
						<!-- 商品图片 -->
						<view class="pictrue">
							<image :src="goods.goods_images[0]"></image>
						</view>
						<!-- 商品接绍 -->
						<view class="text">
							<view class="title">{{goods.goods_name}}</view>
							<view class="money font-color">
								<text class="num">￥{{goods.goods_price}}</text>
							</view>
							<view class="stock">销量：{{goods.goods_sales}}</view>
						</view>
						<van-icon @click="show=false" name="cross" />
					</view>
					<!-- 商品款式 -->
					<view class="rollTop">
						<view class="productWinList">
							<view class="item">
								<view class="title">款式</view>
								<view class="listn acea-row row-middle">
									<view @click="goods.styleIndex=i"
										:class="['itemn', i == goods.styleIndex ? 'on': '']"
										v-for=" (item, i) in goods.goods_styles" :key="item.id">{{item}}
									</view>
								</view>
							</view>
						</view>
						<!-- 数量 -->
						<view class="cart acea-row row-between-wrapper">
							<view class="title">数量</view>
							<van-stepper v-model="goods.num" />
						</view>
					</view>
					<view class="buy-btn">
						<van-button @click="selGoods(goods)" block color="linear-gradient(to right, #ff6034, #ee0a24)">
							选择
						</van-button>
					</view>
				</view>
			</van-popup>
			<view class="footer">
				<view class="total">总价：{{ total }}</view>
				<view @click="btnOrder" class="btn-order">立即下单</view>
			</view>
		</view>
		<!-- 备案 -->
		<view class="foot">蜀ICP备2023008183号-1</view>
	</view>
</template>

<script>
	import {
		showNotify,
		showConfirmDialog
	} from 'vant';
	// 导入api 
	import api from "../../api/api.js"
	// 导入pinia
	import {
		useUserStore
	} from "../../store/users.js";

	const userStore = useUserStore();
	export default {
		data() {
			return {
				show: false,
				cartList: [], // 商品列表
				// 点击款式选中的商品
				goods: '',
				goods_active: 0, // 商品选项
			}
		},
		methods: {
			// 获取所有购物车商品
			getAllCart() {
				api.getCart().then(res => {
					// 获取失败
					if (res.data.status != 200) {
						// 提示信息
						uni.$showMsg(res.data.data.err)
						// 1.8秒跳转登录页面
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/user/login/login",
							})
						}, 1800);
						return;
					}
					// 获取成功
					this.cartList = res.data.data.goodsCart;
					for (var i = 0; i < this.cartList.length; i++) {
						this.cartList[i].styleIndex = 0;
					};
				})
			},
			// 选择款式
			selectStyle(id) {
				// 根据商品id获取商品
				this.goods = this.cartList.find(item => item.id == id);
				// 将空的款式删除
				const goods_styles = [];
				for (var i = 0; i < this.goods.goods_styles.length; i++) {
					if (this.goods.goods_styles[i] == '') {
						continue
					}
					goods_styles.push(this.goods.goods_styles[i]);
				}
				this.goods.goods_styles = goods_styles;
				// 显示商品数据
				this.show = true;
			},
			// 删除商品提示
			delmsg(goodsId) {
				showConfirmDialog({
						message: '确定要将宝贝移出购物车嘛',
					})
					.then(() => {
						// 移除购物车商品
						api.deleteCart(goodsId).then(res => {
							// 移除失败
							uni.$showMsg(res.data.data.err);
							// 移除成功
							showNotify({
								message: res.data.msg
							});
							location.reload();
						})
					})
					.catch(() => {
						showNotify({
							type: 'success',
							message: '再想想'
						});
					});
			},
			// 选择商品
			selGoods(goods) {
				this.show = false;
			},
			// 增加商品或减少商品
			addNum(item) {},
			// 立即下单
			btnOrder() {
				// 下单后的新商品列表
				const goodsList = [];
				// 遍历购物车数据
				this.cartList.forEach(item => {
					// 新对象
					const g = {};
					g.goods_id = item.goods_id; // 商品id
					g.goods_name = item.goods_name; // 商品名称
					g.goods_images = item.goods_images[0]; // 商品图片
					g.goods_price = item.goods_price; // 商品价格
					g.goods_styles = item.goods_styles[item.styleIndex]; // 商品款式
					g.num = item.num; // 商品数量
					// 将每个商品对象放入新列表
					goodsList.push(g);
				});
				api.order({
					total: this.total,
					goodsList: JSON.stringify(goodsList),
					status: 1,
				}).then(res => {
					if (res.data.status != 200) {
						// 提示信息
						uni.$showMsg(res.data.data.err);
						if (res.data.data.err != "请添加收货地址") {
							// 1.8秒跳转登录页面
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/user/login/login",
								})
							}, 1800);
						}
					}
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/goods/good_order/good_order?key_id=" + res.data.data
								.key_id,
						})
					}, 1800);
				})
			}
		},
		onLoad(goods) {
			// 获取所有购物车商品
			this.getAllCart(goods);
		},
		computed: {
			total() {
				// 商品总价
				var t = 0;
				this.cartList.forEach(item => {
					t += item.goods_price * item.num;
				});
				return t.toFixed(2);
			}
		}
	}
</script>

<style>
	/* 购物车 */
	.cart-title {
		width: 100%;
		height: 100rpx;
		background-color: white;
		line-height: 100rpx;
		text-align: center;
	}

	/* 商品列表 */
	.goods-list {
		margin-top: 30rpx;
	}

	/* 每个商品 */
	.goods-list .goods-item {
		margin: 0 auto;
		background-color: #fff;
		width: 650rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 13px 15px;
		background-color: #fff;
		margin-bottom: 7px;
	}

	/* 商品图片 */
	.goods-item .goods-imgs {
		width: 83px;
		height: 83px;
	}

	.goods-item .goods-imgs image {
		width: 83px;
		height: 83px;
	}

	/* 商品介绍 */
	.goods-item .text {
		width: 470rpx;
		height: 78px;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* 商品名称 */
	.goods-item .text .name {
		height: 35px;
		font-size: 14px;
		color: #282828;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* .商品款式 */
	.goods-item .text .goods_style {
		margin-top: 20rpx;
		width: 200rpx;
		height: 60rpx;
		border-radius: 3px;
		border: 1px solid #ADD8E6;
	}


	.goods-item .text .goods_style view {
		font-size: 12px;
		color: #868686;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods-operate {
		margin-top: 18rpx;
		height: 80rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	/* 商品价格 */
	.goods-operate .price {
		font-size: 16px;
		color: rgba(29, 176, 252, 1);
		padding-right: 90rpx;
	}

	.goods-card {
		margin: 0;
		background-color: @white;
	}

	.delete-button {
		height: 100%;
	}


	/* 商品款式 */
	.product-window {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background-color: #fff;
		z-index: 100;
		border-radius: 8px 8px 0 0;
		/* padding-bottom: calc(73px + env(safe-area-inset-bottom)); */
	}

	/* 商品信息 */
	.acea-row {
		padding: 0 68px 0 15px;
		margin-top: 15px;
		position: relative;
		display: flex;
	}

	/* 商品图片 */
	.acea-row .pictrue {
		width: 78px;
		height: 78px;
	}

	.acea-row .pictrue image {
		width: 100%;
		height: 100%;
		position: relative;
		border-radius: 5px;
	}

	/* 商品接绍 */
	.acea-row .text {
		margin-left: 30rpx;
		width: 420rpx;
		font-size: 16px;
		color: #202020;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.acea-row .text .title {
		margin-left: 8rpx;
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.acea-row .text .money {
		font-size: 12px;
	}

	.acea-row .text .money .num {
		font-size: 18px;
		color: #FD502F;
	}

	.acea-row .text .stock {
		color: #999;
		margin-left: 3px;
		margin-right: 10px;
		font-size: 12px;
	}

	.acea-row .van-icon {
		position: absolute;
		right: 15px;
		font-size: 18px;
		color: #8a8a8a;
	}

	/* 商品款式 */
	.rollTop {
		max-height: 262px;
		overflow: auto;
		margin-top: 18px;
	}

	.rollTop .productWinList .item .title {
		font-size: 15px;
		color: #999;
		padding: 0 15px;
	}

	.listn {
		padding: 0 15px 0 8px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.rollTop .productWinList .item .listn .itemn {
		border: 1px solid #f2f2f2;
		font-size: 13px;
		color: #282828;
		padding: 3px 17px;
		border-radius: 13px;
		margin: 10px 0 0 7px;
		background-color: #f2f2f2;
	}

	.rollTop .productWinList .item .listn .on {
		color: rgba(29, 176, 252, 1);
		background-color: rgba(9, 139, 243, 0.1);
		border-color: rgba(29, 176, 252, 1);
	}

	/* 数量 */
	.rollTop .cart {
		display: flex;
		margin-top: 18px;
		padding: 0 15px;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.rollTop .cart .title {
		font-size: 15px;
		color: #999;
	}

	/* 立即购买 */
	.buy-btn {
		margin: 30rpx auto;
		width: 80%;
		height: 80rpx;
	}

	/* 商品操作 */
	.footer {
		padding: 0 10px 0 16px;
		position: fixed;
		bottom: 50px;
		width: 100%;
		box-sizing: border-box;
		background-color: hsla(0, 0%, 100%, .85);
		backdrop-filter: blur(10px);
		border: 1px solid #f0f0f0;
		height: calc(53px + env(safe-area-inset-bottom));
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.footer .total {
		font-size: 15px;
		color: #FD502F;
	}

	.footer .btn-order {
		color: #fff;
		font-size: 15px;
		width: 118px;
		height: 36px;
		border-radius: 26px;
		text-align: center;
		line-height: 36px;
		margin-left: 11px;
		background-color: #1DB0FC;
	}

	.foot {
		width: 300rpx;
		height: 39px;
		margin: 80rpx auto;
		display: block;
		font-size: 12px;
		text-align: center;
		line-height: 39px;
		color: #CCCCCC;
	}
</style>